<template>
    <div class="main-container">
        <div class="whole">
            <aside>
              <div class="title">美租寓租房管理系统</div>
              <el-menu :router="true" :default-active="getActivePath()" :unique-opened="true" >
                <div v-for="item in meuns" :key="item.name">
                  <el-submenu :index="item.route" v-if="item.children">
                    <template slot="title">
                      <i :class="item.icon"></i>
                      <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item :index="sitem.route" v-for="sitem in item.children" :key="sitem.name">{{ sitem.name }}
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item :index="item.route" v-else>
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                  </el-menu-item>
                </div>
              </el-menu>
            </aside>
            <main>
                <header>
                  <div class="right">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <el-avatar shape="circle" :size="60" :src="tableDate.image" />
                      &nbsp;&nbsp;{{ currentUser.username }}
                      <el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>
                    </span>
                    <template>
                      <el-dropdown-menu>
                        <el-dropdown-item @click.native="userview">个人中心</el-dropdown-item>
                        <el-dropdown-item @click.native="logout">切换账号</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  </div>
                </header>
              <section>
                <nav>
                  <ul class="router-box">
                    <li class="route-item" v-for="r in keppAliveRoutes" :key="r.name" :class="r.active ? 'route-active':''">
                      <!--通过标签的形式进行路由跳转-->
                      <router-link :to="{path:r.path}">{{r.title}}</router-link>
                      <i class="el-icon-close" @click="removeRoute(r)"></i>
                    </li>
                  </ul>
                </nav>
                <article class="article">
                  <keep-alive>
                    <!--
                  路由地址跳转后，组件展示的位置
                  确定manage下的子路由展示的位置
                -->
                    <router-view></router-view>
                  </keep-alive>
                </article>
              </section>
                <footer style="line-height: 40px;text-indent: 20px;font-size: 14px">
                        &copy;2024-2030 美租寓租房管理系统
                    </footer>
            </main>
        </div>
      <el-dialog title="管理员详情" :visible.sync="uservisible" center :model="tableDate" center>
        <div>
          <h4>管理员权限</h4>
          {{this.getDict(tableDate.power)}}
        </div>
        <div>
          <h4>管理员头像</h4>
          <img :src="tableDate.image" style="width: 20%" height="20%">
        </div>
        <div>
          <h4>管理员电话</h4>
          {{tableDate.phone}}
        </div>
        <div>
          <h4>管理员名</h4>
          {{tableDate.adminname}}
        </div>
        <div>
          <h4>管理员性别</h4>
          {{tableDate.sex}}
        </div>

      </el-dialog>

    </div>
</template>
<script>
  import {menuSearch} from "@/api/user";
  export default {
    name :'Manage',
    data(){
        return{
          menus:{
            page:1,
            limit:100
          },
          tableDate:{},
          uservisible:false,
            isCollapse:false,
            currentUser:{name:'我是谭文龙'},
            meuns:[],
            keppAliveRoutes:[],
        }
    },
    methods:{
      menu(){
        this.menus.powerName=this.tableDate.power
        menuSearch(this.menus).then((res)=>{
          this.meuns=res.data
          console.log(this.meuns)

        })
      },
      logout(){
        this.$router.replace({path:"/login"});
      },
      userview(){
        this.menu()
        this.uservisible=true
      },
      getDict(id){
        if(id=='1'){
          return '超级管理员'
        }else if(id=='12'){
          return '管理员'
        } else {
          return '业务员'
        }
      },
        removeRoute(route){
          console.log(route);
          let index = -1;
          for(let i = 0 ; i< this.keppAliveRoutes.length ; i++){
            if(this.keppAliveRoutes[i] === route){
              index = i ;
              break ;
            }
          }
          this.keppAliveRoutes.splice(index,1); //删除数组元素
          if(this.keppAliveRoutes.length === 0){
            this.$router.replace({path:'/manage'});//页面并且跳转
            return;
          }
          if(this.keppAliveRoutes.length === 0){
              return ;
          }
          let activeRoutes = this.keppAliveRoutes.filter(r=>r.active === true);//查找当前有没有选中的项
          if(activeRoutes.length === 0){
            let activeIndex = index===0 ? 0 :index-1;
            this.keppAliveRoutes[activeIndex].active = true ;
            this.$router.replace({path:this.keppAliveRoutes[activeIndex].path});//页面并且跳转
          }
          //如果没有菜单跳转到管理页面
          

        },
        getActivePath(){
          let routes = this.keppAliveRoutes.filter(r=>r.active==true);
          if(routes.length === 0){
              return "-1";
          }else{
            return routes[0].path;
          }
        }
    },
    //路由守卫 路由跳转前做一些操作，路由跳转结束后执行一系列操作
    //mounted:Vue生命周期方法的钩子函数，当执行到某个生命周期的时候自动调用的方法
    //当页面渲染结束后
    mounted(){
      //router 管理器
      //routes 路由们
      //route 路由对象
      this.tableDate=JSON.parse(localStorage.getItem('admin'))
        this.$router.afterEach((to,from)=>{
           
           if(to.name === 'Login'|| to.name === 'Manage'){
              return ;
           }
           //filter:过滤器
           //keppAliveRoutes查找是否包含我当前要跳转的路由
           this.keppAliveRoutes.forEach(r=>r.active = false ) ;//这里菜单只能存在一个北选中
           let existRoutes = this.keppAliveRoutes.filter(r=>r.path === to.path);
           if(existRoutes.length === 0){
              this.keppAliveRoutes.push({
                title:to.meta.title,
                path:to.path,
                active:true
              })
           }else{
            existRoutes[0].active = true ;
           }
        });
      this.menu()

    },
    created(){ //当Vue对象初始化结束后执行
      this.keppAliveRoutes.forEach(r=>r.active=false);
      console.log(this.$router.currentRoute.fullPath);//当前路由地址
      let exitsRoute = this.keppAliveRoutes.filter(r=>r.path === this.$router.currentRoute.fullPath);
      if(exitsRoute.length === 0){
        this.keppAliveRoutes.push({
          title:this.$router.currentRoute.meta.title,
          path:this.$router.currentRoute.fullPath,
          active:true
        })
      }else{
        exitsRoute[0].active = true ;
      }
    },

}
</script>
<style scoped lang="scss">
.el-menu-item{
  min-width: 160px !important;
  color: azure;
}
.main-container {
    width: 100%;
    height: 100%;

}
.whole{
    display: flex;
    flex-direction: row;
}
.right{
  float: right;
  img{
    heigth:60px;
    width:60px;
    border-radius: 30px;
  }
  .user{
    margin: 0;
    padding: 0;
    list-style-type:none;
    visibility: hidden;
  }
.userfocus{
  margin: 0;
  padding: 0;
  list-style-type:none;
  visibility: visible;
}

}
.title{
  font-size: 15px;
  width:160px;
  height: 60px;
  line-height: 60px;
  background-color: #304156;
  color: #d7d5d5;
  text-indent: 20px;
}
.el-menu{
  background-color: #304156;
}
.el-submenu__title{
  color: azure;
}
.el-submenu__title:hover{
  background-color: #409EFF;
}
.el-menu-item:focus,.el-menu-item:hover{
  background-color: #409EFF;
}
.el-menu-item.is-active{
  color: white;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 670px;
}

main {
    flex-grow: 1.5;
    flex-shrink: 0.5;
    background-color: white;
}

header {
    padding: 10px;
    height: 60px;
    line-height: 50px;
    color: #d7d5d5;
    border: 1px solid #ddd;
}
aside{
  background-color: #304156;
}
section {
    height: calc(100% - 45px);
}

nav {
    border-bottom: 1px solid #ddd;
}

footer {
  height: 10px;
    border-top: 1px solid #ddd;
    color: #999;
}

article {
  padding: 20px;
  height:450px;
}
.router-box{
    margin: 10px;
    padding: 0 0 0 20px;
  font-size: 20px;
  }
  .route-item{
    list-style: none;
    display: inline-block;
    font-size: 16px;
    padding: -1px 0 10px 12px;
  }
  .route-active{
    border-bottom: 1px solid #409EFF;
  }
  .route-active > a{
    color: #409EFF !important;
    text-decoration: none;
  }
  .route-item > a {
    text-decoration: none;
  }
  .route-item > a:link,
  .route-item > a:visited {
    color: inherit;
  }
  .route-item > i{
    color: white;
    cursor: pointer;
    display: inline-block;
  }
  .route-item > i:hover{
    color: inherit;
  }
</style>